<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件切换</title>
    <script src="../lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">

    <label><h2>组件切换方式 & 过渡动画</h2></label>

    <label><h3>组件切换方式1</h3></label>
    <a href="" @click.prevent="flag=true">登录</a>
    <a href="" @click.prevent="flag=false">注册</a>

    <login v-if="flag"></login>
    <register v-else="flag"></register>

    <label><h3>组件切换方式2</h3></label>
    <a href="" @click.prevent="comName='login'">登录</a>
    <a href="" @click.prevent="comName='register'">注册</a>

    <!--  Vue提供了 component 来展示对应名称的组件  -->
    <!--  component 是一个占位符，  :is 属性可以用来指定要展示的组件的名称  -->
    <component :is="comName"></component>

</div>
<script>

    Vue.component('login', {
        template: '<h3>登录组件</h3>'
    })

    Vue.component('register', {
        template: '<h3>注册组件</h3>'
    })

    let vm = new Vue({
        el: '#app',
        data: {
            flag: true,
            comName: "login",//当前 component 中的 :is 属性绑定的组件的名称
        },
        methods: {},
    })
</script>
</body>
</html>
